<template>
  <div class="content">
  <el-tabs v-model="activeName2" type="card">
    <el-tab-pane label="APP列表" name="first" class="filter-item">
      <el-button type="primary" style="margin-bottom: 16px;" @click="appAdd()" plain>添加</el-button>
      <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="APP名称" prop="name">
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createdTime">
      </el-table-column>
      <el-table-column align="center" label="包名" prop="packageName">
      </el-table-column>
      <el-table-column
      align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
        <el-button type="text" @click="appDelete(scope.row.oid)" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="课程" name="second">
      <el-form label-width="80px">
        <el-form-item label="课程名称">
          <el-input icon="search" name="title" placeholder="请输入名字" style="width:200px"></el-input>
          <el-button type="primary" style="margin-left: 14px;" @click = "curriculumList">查询</el-button>
          <el-button type="primary" style="margin-left: 14px;" @click = "curriculumAdd">新增</el-button>
        </el-form-item>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="课程名称" prop="name">
          </el-table-column>
          <el-table-column align="center" label="分类" prop="grade.label">
          </el-table-column>
          <el-table-column align="center" label="课时数量" prop="lessonCount">
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createdTime">
          </el-table-column>
          <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="curriculumEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="CoursewareAdd(scope.row)">上传课程</el-button>
            <el-button type="text" size="small" @click="editClick(scope.row)">查看</el-button> 
            <el-button type="text" @click="curriculumDelete(scope.row.oid)" size="small">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="资料" name="third">
      <el-form label-width="80px">
        <el-form-item label="资料名称">
          <el-input icon="search" name="title" placeholder="请输入资料名称" style="width:200px"></el-input>
          <el-button type="primary" style="margin-left: 14px;" @click = "materialList()">查询</el-button>
          <el-button type="primary" style="margin-left: 14px;" @click = "materialAdd">新增</el-button>
        </el-form-item>
        <el-table :data="materialData" border fit highlight-current-row style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="资料分类" prop="name">
          </el-table-column>
          <el-table-column align="center" label="资料名称" prop="attachment.contentType.label">
          </el-table-column>
          <el-table-column align="center" label="上传时间" prop="createdTime">
          </el-table-column>
          <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="materialEdit(scope.row.oid)">编辑</el-button>
            <el-button type="text" size="small" @click="materialShow(scope.row.oid)">查看</el-button>
            <el-button type="text" @click="deleteMaterial(scope.row.oid)" size="small">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-form>
      <el-pagination
        :page-size="20"
        :pager-count="11"
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
export default {
  data() {
    return {
      demoList: {
        name: "",
        code: "",
        value: "",
        lessonCount: ""
      },
      options: [
        {
          value: "0",
          label: "小班"
        },
        {
          value: "1",
          label: "中班"
        },
        {
          value: "2",
          label: "大班"
        }
      ],
      value: "",
      newForm: [],
      dialogVisible: false,
      activeName2: "first",
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      curriculumListData: [],
      materialData: [],
      demo: {
        name: ""
      }
    };
  },
  mounted() {
    this.appShow();
    this.curriculumList();
    this.materialList();
  },
  methods: {
    appDelete(tab) {
      console.log(tab);
      axios.delete("/app/" + tab).then(response => {
        this.appShow();
      });
    },
    materialShow(tab) {
      console.log("1212");
      this.$router.push("materialShow?oid=" + tab);
    },
    materialEdit(tab) {
      this.$router.push("materialEdit?oid=" + tab);
    },
    deleteMaterial(tab) {
      console.log(tab);
      axios.delete("/material/" + tab).then(response => {
        this.materialList();
      });
    },
    userDelete(tab) {
      // axios.
    },
    materialAdd() {
      this.$router.push("materialAdd");
    },
    materialList() {
      axios.get("/material/query").then(response => {
        this.materialData = response.data.content;
      });
    },
    curriculumDelete(tab) {
      axios.delete("/course/" + tab).then(response => {
        this.curriculumList();
      });
    },
    curriculumList() {
      axios.get("/course/query").then(response => {
        console.log(response.data);
        this.curriculumListData = response.data.content;
      });
    },
    CoursewareAdd(tab) {
      this.$router.push(
        "/CoursewareAdd/?oid=" + tab.oid + "&lessonCount=" + tab.lessonCount
      );
    },
    curriculumEdit(tab) {
      this.$router.push("/curriculumEdit?oid=" + tab.oid);
    },
    curriculumAdd() {
      this.$router.push("/curriculumAdd");
    },
    editClick(tab, event) {
      var path = "appEdit?oid=" + tab.oid;
      this.$router.push(path);
    },
    appAdd() {
      this.$router.push("/upload/appAdd");
    },
    handleClick(tab, event) {
      axios.delete("/app/" + tab).then(response => {
        this.appShow();
      });
    },
    appShow() {
      axios.get("/app/query").then(response => {
        this.list = response.data;
      });
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
</style>
